آموزش کاربردی ساخت کامپوننت‌های UI با Storybook [ویدئویی] - آخرین آپدیت

سرفصل ها و درس ها

Storybook چیست؛ نمای کلی سطح کلیدی What is Storybook - A Key Level Overview

• Storybook چیست و چرا باید به آن اهمیت دهیم What is Storybook and why should we care

• کدام تیم‌های مهندسی پیشرو از Storybook استفاده می‌کنند Which Leading Engineer Teams are using Storybook

• مشکلات وب‌اپلیکیشن‌های مدرن در مقیاس بزرگ The Problem with modern large scale Web Apps

• چگونه Storybook با ایزوله‌سازی توسعه UI، اپلیکیشن‌ها را بهبود می‌بخشد How Storybook improves applications with the isolation of UI development

• نحوه عملکرد Storybook با کامپوننت‌ها How storybook works with components

• تز؛ Storybook زمان و منابع ارزشمندی را برای پروژه‌ها ذخیره می‌کند Thesis - Storybook saves valuable time and resources for projects

• خلاصه و بررسی کوتاه این بخش؛ کاربرد Storybook Summary and brief overview of this section - Storybook Utility

دوره سریع React برای مبتدیان؛ React چیست و چگونه وب‌اپلیکیشن بسازیم React Crash Course for Beginners - What is React and How To Build Web Apps

• نکته مهم درباره بخش‌های آینده Important note on the upcoming sections

• DOM چیست و Virtual DOM در React چیست؛ مبانی React What is the DOM and what is the React Virtual DOM - React Fundamentals

• چگونه ساخت یک اپلیکیشن React را با CRA شروع کنیم How to start building a react app with CRA

• بررسی CRA؛ فایل‌ها و وابستگی‌های React CRA - React Files and Dependencies - Overview

• نحوه اتصال ریشه React به DOM و رندر کردن اپلیکیشن React How to connect the Root of React to the DOM and Rendering React Application

• اجرای سرور توسعه محلی React Running A Local Development Server of React

• کامپوننت‌های تابعی (Functional Components) در React چیستند What are functional components in React

• مشاهده سریع استانداردهای Ecma در React Quick Observation on Echma Standards with React

• درخت کامپوننت‌های React و کامپوننت‌های ترکیبی The React Component Tree And Composite Components

• نحوه عملکرد Props در React How Props work in React

• تمرین؛ ساخت یک کامپوننت React Exercise - Build A React Component

• هوک‌ها (Hooks) در React چیستند What are hooks in React

• تست‌های پویا و رویدادهای ورودی با React Input Dynamic tests and events with React

• تمرین مدیریت رویدادها و خلاصه بخش Event Handling Practice and Section Summary

ساخت یک نمونه Storybook از صفر با React؛ سطح جونیور Build A Storybook Example From Scratch With React - Junior Level

• نصب و راه‌اندازی Storybook در پروژه از صفر Installing and setting up Storybook into your Project Application from Scratch

• نمای کلی از نحوه پیکربندی Storybook در پروژه‌های وب Overview of How Storybook is Configured with Web App Projects

• چگونه یک کامپوننت در React با Storybook بسازیم؛ تحلیل بصری How to build a component in React with Storybook - visual breakdown

• ساخت یک زیر-کامپوننت پایه در React Build A Basic Sub Component In React

• چگونه یک استوری (Story) برای کامپوننت‌های React از صفر بسازیم How to build a story for react components from scratch

• نحوه استفاده از args در Storybook برای استوری‌های پویا How to use args in Storybook for multiple dynamic component stories

• استفاده از argTypes و controls برای ایجاد استوری‌های کاربرپسند How to use argTypes and controls in storybook to create user friendly stories

• خودکارسازی مستندات برای وب‌کامپوننت‌ها با Storybook Automating Documentation for Web Components with Storybook

• شخصی‌سازی مستندات و مقادیر در Storybook Customizing Docs and values with Storybook

• افزودن پیچیدگی به کامپوننت برای آرگومان‌های Storybook Adding Component Complexity for Storybook Arguments

• تکنیک‌های CSS و رندرینگ Storybook CSS Techniques and Storybook rendering

• اکشن‌ها در Storybook و شیء Synthetic Base Event چیستند What are actions in Storybook and the Synthetic Base Event Object

• اتصال کامپوننت‌های زنده React به Storybook و مبانی رندرینگ Hooking Up Live React Components to Storybook and Rendering Fundamentals

• ایجاد استوری‌ها با وضعیت (state) و رویدادهای مجازی در Storybook Creating Stories with mock state and events in Storybook

• تست تعاملات و رویدادها با کامپوننت‌های React در Storybook Testing Interactions and Events with React Components in Storybook

Storybook؛ آموزش پیشرفته و کدنویسی همزمان Storybook - Advanced Tutorial Code Along

• نحوه راه‌اندازی Storybook با React How to set up Storybook with React

• ساخت کامپوننت با Storybook؛ متدولوژی CDD How to build a component with Storybook - CDD Methodology

• پیکربندی‌های Storybook و سرور محلی Storybook Configurations for Storybook and Storybook Local Server

• استفاده از PropTypes و فرمت‌بندی CSS با Storybook و React PropTypes and CSS formatting with Storybook and React

• استفاده از استاندارد دسترسی WCAG برای شناسایی خطاها در افزونه Storybook Using WCAG Accessibility to Catch Errors in Storybook Addon

• ساخت یک کامپوننت ترکیبی در React برای Storybook Building a Composite Component in React for Storybook

• ساخت کامپوننت‌های مستحکم با Storybook Building Out Robust Components with Storybook

اتصال داده‌های خارجی با Storybook؛ Redux Connecting External Data with Storybook - Redux

• دوره سریع Redux Toolkit؛ راه‌اندازی Store Mini Crash Course on Redux Toolkit - Setting up the Store

• ارسال اکشن‌ها و Selectors برای مدیریت وضعیت با Redux در کامپوننت‌های React Dispatching Actions and Selectors for State with Redux in Components For React

• ایجاد یک Redux Store مجازی برای استوری‌ها در Storybook Creating a Mock Redux Store for Stories in Storybook

• اتصال داده‌های خارجی مجازی به استوری‌های Storybook Connecting Mock External Data into Stories with Storybook for Components

ساخت کامپوننت‌های سطح بالا با Storybook؛ مثال Redux و React Building Higher Level Components with Storybook - Redux and React Example

• خلاصه کدهای Redux و داده‌های مجازی از بخش قبل Summary of Redux Code And Mock Data From Previous Section

• دریافت داده‌های API از راه دور با Storage Fetching Remote API Data with Storage

• دریافت داده‌ها هنگام Mounting کامپوننت در React و مدیریت خطا Fetching Data with Component Mounting in React and Error Handling

• ساخت یک کامپوننت Screen و پوشاندن React حول Redux Building A Screen Component And Wrapping React Around Redux

• استفاده از Service Workers در Storybook برای ساخت استوری‌ها با درخواست‌های API Using Service Workers in Storybook to Build Stories with API Requests

• به‌روزرسانی قابلیت‌ها با صفحات و اسکرین‌های پیچیده در Storybook Feature Updates with Complex Component Pages and Screens in Storybook

• خودکارسازی تست‌ها با تعاملات (Interactions) در Storybook Automating Tests with Interactions in Storybook

• خودکارسازی‌های Storybook Playwright برای تست Storybook Playwright Automations for Testing

استقرار Storybook در Github با Chromatic و خودکارسازی‌ها Deploying Storybook to Github with Chromatic and Automations

• خلاصه سریع تا این لحظه و نکات مربوط به بخش آینده Quick Summary So Far and Upcoming Notice for this Section

• نحوه استقرار Storybook در Github و Chromatic How to deploy Storybook to Github and Chromatic

• خودکارسازی استقرار در Storybook با CI Actions و Rebasing Merges Automating Deployments to Storybook with CI Actions and Rebasing Merges

• تست بصری با رگرسیون در کامپوننت‌ها با استفاده از Storybook Visual Testing with Regression in Components using Storybook

• جمع‌بندی و تبریک!! Conclusion and Congratulations!!